<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- 
            要给对象，动态添加新属性无法触发界面更新
         -->
      <button @click="obj.height = 176">添加height属性</button>
      <!-- 
            解决办法：用$set
         -->
      <button @click=" $set(obj, 'height', 176) ">用$set添加height属性</button>
      <p>{{ obj }}</p>
      <hr />

      <!-- 通过下标改数组的元素也不会触发界面更新 -->
      <button @click="list[0] = 999">修改下标0</button>
      <!-- 解决办法：用splice -->
      <button @click="list.splice(0,1,999)">splice-修改下标0</button>
      <!-- 解决办法：用$set -->
      <button @click="$set(list, '0', 999)">$set-修改下标0</button>

      <p>{{ list }}</p>
      <hr>


      <!-- 这里没有修改到下标0 -->
      <!-- 这本质上只是通过下标0取出一个对象 -->
      <!-- 本质上是修改取出来的对象的属性 -->
      <button @click="list2[0].age = 9999">修改下标0的age</button>
      <p>{{ list2 }}</p>


      <!-- vue2出来很久了 -->
      <!-- 但是当它出来的时候,js的语法还没有完善、更新 -->
      <!-- 导致它内部用的响应式原理Object.defineProperty，而这个方法就是无法监听到对象动态属性的改变 -->
      <!-- 以及无法监听到下标的改变 -->

      <!-- vue3出来时，js更新了一波语法，其中有个Proxy，vue3用它实现的响应式原理 -->
      <!-- Proxy能监听到任意属性的改变哪怕是动态添加的属性，所以vue3没有这个问题 -->
      <!-- $set在vue3里已经被删了 -->
    </div>
    <script src="./vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data () {
          return {
            obj: {
              name: 'jack',
              age: 16
            },
            list: [10, 20, 30, 40, 50],

            list2: [
                { name: 'jack', age: 16},
                { name: 'jack2', age: 15},
            ]
          }
        },
        methods: {}
      })
    </script>
  </body>
</html>
